import algoliasearch from 'algoliasearch/lite';
import instantsearch from 'instantsearch.js/es';
import { configure, hits, searchBox } from 'instantsearch.js/es/widgets';

import { {{ camelCaseName }} } from '../src';

const search = instantsearch({
  indexName: 'instant_search',
  searchClient: algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76'),
});

search.addWidgets([
  {{ camelCaseName }}({ container: '#example' }),

  searchBox({ container: '#search-box' }),
  configure({
    attributesToSnippet: ['description:10'],
    snippetEllipsisText: '[…]',
  }),
  hits({
    container: '#hits',
    templates: {
      item: (hit, { html, components }) => html`
      <p>
        ${components.Highlight({ hit, attribute: 'name' })}
      </p>
      <small>
        ${components.Snippet({ hit, attribute: 'description' })}
      </small>
    `,
    },
  }),
]);

search.start();